import React, { Component } from 'react'
import axios from 'axios'
import styleObj from '@/static/scss/index.scss'
import { CSSTransition } from 'react-transition-group'
import '@/static/scss/animation.css'
class Request extends Component {
	constructor() {
		super()
		this.state = {
			tagList: [],
			show: true
		}
	}
	componentWillMount() {
		axios.get('http://rap2api.taobao.org/app/mock/250445/tags_list').then((res) => {
			// console.log(res)
			let { code, data } = res.data
			if (code === 200) {
				console.log(data)
				this.setState({
					tagList: JSON.parse(data)
				})
			}
		})
	}
	taggleShow() {
		this.setState({
			show: !this.state.show
		})
	}
	render() {
		// return (
		// 	<div>
		// 		<ul onClick={this.taggleShow.bind(this)} className={this.state.show ? styleObj.show  : styleObj.hide}>
		// 			{this.state.tagList.map((item) => (
		// 				<li key={item}>{item}</li>
		// 			))}
		// 		</ul>
		// 	</div>
		// )
		return (
			<CSSTransition in={this.state.show} timeout={1000} classNames='fade' unmountOnExit>
				<div>
					<ul onClick={this.taggleShow.bind(this)}>
						{this.state.tagList.map((item) => (
							<li key={item}>{item}</li>
						))}
					</ul>
				</div>
			</CSSTransition>
		)
	}
}

export default Request
